
<!DOCTYPE html>
<html lang="en">
<head>
    <title>老王登录</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">

    <style>
        body {
            margin: 0;
            overflow: hidden;
            background: linear-gradient(to bottom, #19778c, #095f88);
            background-size:1400% 300%;
            animation: dynamics 6s ease infinite;
            -webkit-animation: dynamics 6s ease infinite;
            -moz-animation: dynamics 6s ease infinite;
            font-size: 14px;
            color: #ffffff;
            min-height: 700px;
        }
        /*登录样式*/
        .main {
            position: fixed;
            text-align: center;
            top: 182px;
            width: 100%;
            height: auto;
            display: flex;
            justify-content: center;
        }
        .login {
            width: 470px;
            height:470px;
            background: linear-gradient(to bottom, #19778c, #095f88);
            animation: dynamics 6s ease infinite;
            -webkit-animation: dynamics 6s ease infinite;
            -moz-animation: dynamics 6s ease infinite;
            opacity: 0.9;
            border: solid 1px #13a1fc;
            background-size:1400% 300%;
        }
        @keyframes dynamics {
            0% {
                background-position: 0% 0%;
            }
            50% {
                background-position: 50% 100%;
            }
            100% {
                background-position: 100% 0%;
            }
        }
        .log-con {
            background: linear-gradient(#13a1fc, #13a1fc) left top, linear-gradient(#13a1fc, #13a1fc) left top,
            linear-gradient(#13a1fc, #13a1fc) right top, linear-gradient(#13a1fc, #13a1fc) right top,
            linear-gradient(#13a1fc, #13a1fc) left bottom, linear-gradient(#13a1fc, #13a1fc) left bottom,
            linear-gradient(#13a1fc, #13a1fc) right bottom, linear-gradient(#13a1fc, #13a1fc) right bottom;
            background-repeat: no-repeat;
            background-size: 3px 20px, 20px 3px;
            height: 100%;
            margin: -2px;
            padding: 3px 1px 1px 0;
            border-radius: 3px;
        }
        .log-con >span {
            font-size: 30px;
            font-weight: bold;
            line-height: 24px;
            letter-spacing: 2px;
            display: block;
            margin: 20px 0 44px 0;
        }
        .log-con >span::after {
            display: block;
            content: '';
            width: 57px;
            height: 3px;
            background: #ffffff;
            margin-top: 16px;
            justify-content: center;
            position: relative;
            left: 206px;
        }
        .log-con>input {
            display: block;
            margin: 10px 0 32px 70px;
            width: 330px;
            height: 42px;
            background-color: #ffffff;
            border-radius: 4px;
            opacity: 0.9;
            border: 0;
            font-size: 16px;
            outline: none;
            padding-left: 10px;
            color: #000000;
        }
        input::-webkit-input-placeholder {
            color: #000000;
            font-size: 16px;
        }
        .log-con>.code {
            width: 216px;
            display: inline-block;
            margin-left: 6px;
        }
        .log-con>#code {
            width: 94px;
            display: inline-block;
            margin-left: 14px;
            cursor: pointer;
        }
        /*logo*/
        .logo {
            width: 168px;
            height: 75px;
            position: fixed;
            left: 150px;
            top: 26px;
        }
        .logo>img {
            max-width: 100%;
            max-height: 100%;
        }
        /*版权样式*/
        .copyright {
            position: fixed;
            bottom: 10px;
            font-size: 16px;
            display: block;
            width: 100%;
            text-align: center;
        }
        .btn{
            width: 340px;
            height: 44px;
            background-color: #0090ff;
            border-radius: 4px;
            display: block;
            margin: 10px 0 0 70px;
            text-align: center;
            line-height: 44px;
            cursor: pointer;
            opacity: 1;
            border: 0;
            color: white;
        }
    </style>

</head>
<body>

<div class="main">
    <form action="" method="post">
        <div class="login">
            <div class="log-con">
                <span>登录</span>
                @include('admin.common.validate')
                @csrf
                <input type="text" name="username" class="name" placeholder="请输入用户名">
                <input type="password" name="password" class="password" placeholder="请输入密码">
                <input type="text" class="code" placeholder="请输入验证码">
                <input type="button" id="code" onClick="change();">
                <button style="submit" class="btn">立即登录</button>
            </div>
        </div>
    </form>
</div>

<script type="text/javascript" src="/js/jquery.min.js"></script>
<script type="text/javascript" src="/js/three.min.js"></script>
<script type="text/javascript">

    var SEPARATION = 100, AMOUNTX = 60, AMOUNTY = 40;
    var container;
    var camera, scene, renderer;
    var particles, particle, count = 0;
    var mouseX = 0, mouseY = 0;
    var windowHalfX = window.innerWidth / 2;
    var windowHalfY = window.innerHeight / 2;

    $(function () {
        init();		//初始化
        animate();	//动画效果
        change();	//验证码
    });

    //初始化
    function init() {

        container = document.createElement( 'div' );	//创建容器
        document.body.appendChild( container );			//将容器添加到页面上
        camera = new THREE.PerspectiveCamera( 120, window.innerWidth / window.innerHeight, 1, 1500 );		//创建透视相机设置相机角度大小等
        camera.position.set(0,450,2000);		//设置相机位置

        scene = new THREE.Scene();			//创建场景
        particles = new Array();

        var PI2 = Math.PI * 2;
        //设置粒子的大小，颜色位置等
        var material = new THREE.ParticleCanvasMaterial( {
            color: 0x0f96ff,
            vertexColors:true,
            size: 4,
            program: function ( context ) {
                context.beginPath();
                context.arc( 0, 0, 0.01, 0, PI2, true );	//画一个圆形。此处可修改大小。
                context.fill();
            }
        } );
        //设置长条粒子的大小颜色长度等
        var materialY = new THREE.ParticleCanvasMaterial( {
            color: 0xffffff,
            vertexColors:true,
            size: 1,
            program: function ( context ) {

                context.beginPath();
                //绘制渐变色的矩形
                var lGrd = context.createLinearGradient(-0.008,0.25,0.016,-0.25);
                lGrd.addColorStop(0, '#16eff7');
                lGrd.addColorStop(1, '#0090ff');
                context.fillStyle = lGrd;
                context.fillRect(-0.008,0.25,0.016,-0.25);  //注意此处的坐标大小
                //绘制底部和顶部圆圈
                context.fillStyle = "#0090ff";
                context.arc(0, 0, 0.008, 0, PI2, true);    //绘制底部圆圈
                context.fillStyle = "#16eff7";
                context.arc(0, 0.25, 0.008, 0, PI2, true);    //绘制顶部圆圈
                context.fill();
                context.closePath();
                //绘制顶部渐变色光圈
                var rGrd = context.createRadialGradient(0, 0.25, 0, 0, 0.25, 0.025);
                rGrd.addColorStop(0, 'transparent');
                rGrd.addColorStop(1, '#16eff7');
                context.fillStyle = rGrd;
                context.arc(0, 0.25, 0.025, 0, PI2, true);    //绘制一个圆圈
                context.fill();

            }
        } );

        //循环判断创建随机数选择创建粒子或者粒子条
        var i = 0;
        for ( var ix = 0; ix < AMOUNTX; ix ++ ) {
            for ( var iy = 0; iy < AMOUNTY; iy ++ ) {
                var num = Math.random()-0.1;
                if (num >0 ) {
                    particle = particles[ i ++ ] = new THREE.Particle( material );
                    console.log("material")
                }
                else {
                    particle = particles[ i ++ ] = new THREE.Particle( materialY );
                    console.log("materialY")
                }
                //particle = particles[ i ++ ] = new THREE.Particle( material );
                particle.position.x = ix * SEPARATION - ( ( AMOUNTX * SEPARATION ) / 2 );
                particle.position.z = iy * SEPARATION - ( ( AMOUNTY * SEPARATION ) / 2 );
                scene.add( particle );
            }
        }

        renderer = new THREE.CanvasRenderer();
        renderer.setSize( window.innerWidth, window.innerHeight );
        container.appendChild( renderer.domElement );
        //document.addEventListener( 'mousemove', onDocumentMouseMove, false );
        //document.addEventListener( 'touchstart', onDocumentTouchStart, false );
        //document.addEventListener( 'touchmove', onDocumentTouchMove, false );
        window.addEventListener( 'resize', onWindowResize, false );
    }

    //浏览器大小改变时重新渲染
    function onWindowResize() {
        windowHalfX = window.innerWidth / 2;
        windowHalfY = window.innerHeight / 2;
        camera.aspect = window.innerWidth / window.innerHeight;
        camera.updateProjectionMatrix();
        renderer.setSize( window.innerWidth, window.innerHeight );
    }

    function animate() {
        requestAnimationFrame( animate );
        render();
    }

    //将相机和场景渲染到页面上
    function render() {
        var i = 0;
        //更新粒子的位置和大小
        for (var ix = 0; ix < AMOUNTX; ix++) {
            for (var iy = 0; iy < AMOUNTY; iy++) {
                particle = particles[i++];
                //更新粒子位置
                particle.position.y = (Math.sin((ix + count) * 0.3) * 50) + (Math.sin((iy + count) * 0.5) * 50);
                //更新粒子大小
                particle.scale.x =  particle.scale.y = particle.scale.z  = ( (Math.sin((ix + count) * 0.3) + 1) * 4 + (Math.sin((iy + count) * 0.5) + 1) * 4 )*50;	//正常情况下再放大100倍*1200
            }
        }

        renderer.render( scene, camera );
        count += 0.1;
    }

    //验证码
    function change() {
        code=$("#code");
        // 验证码组成库
        var arrays = new Array(
            '1','2','3','4','5','6','7','8','9','0',
            'a','b','c','d','e','f','g','h','i','j',
            'k','l','m','n','o','p','q','r','s','t',
            'u','v','w','x','y','z',
            'A','B','C','D','E','F','G','H','I','J',
            'K','L','M','N','O','P','Q','R','S','T',
            'U','V','W','X','Y','Z'
        );
        codes='';// 重新初始化验证码
        for(var i = 0; i<4; i++){
            // 随机获取一个数组的下标
            var r = parseInt(Math.random()*arrays.length);
            codes += arrays[r];
        }
        // 验证码添加到input里
        code.val(codes);
    }
</script>
</body>
</html>